<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加员工</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .display {
            display: inline-block;
        }
        .center{
            text-align: center;
            position: relative;
            transform: translate(-70px);
        }
        .box{
            width: 55vw;
            margin: 8vh auto;
        }
        .content{
            width: 50vw;
            margin: 0 auto;
        }
        .title{
            font-size: 1.2rem;
            line-height: 5rem;
        }
        .box img{
            width: 3rem;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">
        <img src="/images/add.png" >
        <span >员工入职</span>
    </div>

    <div class="content">
        <form class="layui-form" lay-filter="example" id="staffInfo">

            <div class="layui-form-item display">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realName"  lay-verify="required|realName" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline display " >
                    <select name="deptId"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">部门</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">职务</label>
                <div class="layui-input-inline display " >
                    <select name="roleId"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">职务</option>
                        <option id="role"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item  display ">
                <label class="layui-form-label  ">性别</label>
                <div class="layui-input-inline ">
                    <input type="radio" name="gender" value="1" title="男" checked >
                    <input type="radio" name="gender" value="0" title="女" >
                </div>
            </div>

            <div class="layui-form-item display">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-inline display " >
                    <select name="education"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">学历</option>
                        <option value="1">本科及以上</option>
                        <option value="2">大专</option>
                        <option value="3">高中及以下</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-inline display " >
                    <select name="political"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">政治面貌</option>
                        <option value="1">党员</option>
                        <option value="2">团员</option>
                        <option value="3">群众</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item display">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="idcard"  lay-verify="identity|required" placeholder="身份证号" autocomplete="off" class="layui-input" maxlength="18">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline display " >
                    <input type="text" class="layui-input test-item" name="birthday" placeholder="选择日期" lay-verify="date|required">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-inline display " >
                    <input type="text" class="layui-input test-item" name="hireDate" placeholder="选择日期" lay-verify="date|required">
                </div>
            </div>

            <div class="layui-form-item center">
                <div class="layui-input-block ">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" >保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    /*表格数据*/
    layui.use([ 'form', 'layer','laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate=layui.laydate
            , $ = layui.$;

        //执行一个laydate实例
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        form.render();
        //获取职务数据
        getRole();
        //获取部门数据
        getDept();
        /*获取职务数据*/
        function getRole(){

            $.post(
                "/s/getRole",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var roleVoList =res.data;

                        for (var i = 0; i < roleVoList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='roleId']").append($new_option);
                            $new_option.val(roleVoList[i].id);
                            $new_option.html(roleVoList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )

        }

        /*获取部门数据*/
        function getDept(){
            $.post(
                "/s/getDept",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var deptList =res.data;

                        for (var i = 0; i < deptList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='deptId']").append($new_option);
                            $new_option.val(deptList[i].id);
                            $new_option.html(deptList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )
        }

        /*为身份证号输入框绑定失焦事件,截取生日日期*/
        $("[name='idcard']").on("blur",function () {
            var idcard=$("[name='idcard']").val();

            //提取身份证中的生日
            var birthday= idcard.substring(6,14);
            var birth="";
            //拼接字符串内容
            for(var i=0;i<birthday.length;i++){
                birth+=birthday[i];
                if(i==3 || i==5){
                    birth+="-";
                }
            }
            //将生日赋值给生日标签
            $("[name='birthday']").val(birth);
        });

        /*验证姓名*/
        /*验证姓名*/
        form.verify({
            realName: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[\u4e00-\u9fa5A-Za-z]+$").test(value) ) {
                    return '姓名必须为汉字或英文!';
                }

            }
        });


        //触发事件
        form.on('submit(formDemo)',function (data) {

            $.post(
                //添加员工信息
                "/s/save",form.val("example"),function (res) {

                    layer.open({
                        type: 0
                        ,title: '提示'
                        ,content: res.msg
                        ,success:function (layero,index) {
                            indexo=index;
                            form.render();
                        }
                    });

                }

            )
            return false;
        })
    });

</script>
</html>